<template>
    <div class="links" v-if="show_show">

        <!--S内容-->
        <div id="links" class="louie-selector" :class="selector_class">

            <!--S标题-->
            <h2>
                <span>链接管理</span>
                <i
                        class="close iconfont icon-guanbi"
                        @click="toggle(false)"
                        >
                </i>
            </h2>
            <!--E标题-->

            <!--S添加卡券-->
            <div id="add-button">
                <cube-button @click="showEditLink">添加推广链接</cube-button>
            </div>
            <!--E添加卡券-->

            <!--S推广链接列表-->
            <div id="list">
                <cube-scroll
                        ref="scroll"
                        :options="scroll_option"
                        @pulling-up="upLoad"
                >

                    <dl
                            v-for="(item,index) in list.data"
                            :key="item.id"
                            @click="clickDl(index)"
                    >
                        <dt>{{item.name}}</dt>
                        <dd>{{item.link}}</dd>
                    </dl>

                </cube-scroll>
            </div>
            <!--E推广链接列表-->

        </div>
        <!--E内容-->

        <!--S编辑推广链接弹窗-->
        <edit :show="edit.show"
              :link_id="edit.link_id"
              @close="edit.show = false"
              @createSuccess="createSuccess"
              @editSuccess="editSuccess"
        >
        </edit>
        <!--E编辑推广链接弹窗-->

    </div>
</template>

<script>
import Edit from "./components/edit"
export default {
    name: "links",
    data() {
        return {
            // 显示状态
            show_show: false,
            // 素材库class
            selector_class: 'close',
            // 编辑弹窗数据
            edit: {
                show: false,
                link_id: ''
            },
            // 滚动条配置
            scroll_option: {
                scrollbar:true,
                pullUpLoad:{
                    txt:{
                        more:"上拉加载",
                        noMore:"----我也是有底线的----"
                    }
                }
            },
            // 数据列表
            list: {
                loading: false,
                data: [],
                limit: [0,20]
            },
            // 编辑操作的下标
            handle_index: 0
        }
    },
    props: {
        is_show: {
            type: Number || Boolean
        },
        select: {
            type: Boolean,
            default: false
        }
    },
    watch: {
        // 组件显示状态
        is_show() {
            this.toggle(true)
        }
    },
    components: {
        Edit
    },
    mounted() {
        this.toggle(true)
        this.getList()
    },
    methods: {
        /**
         * 显示隐藏本组件
         */
        toggle(is_show) {
            if(is_show) {
                this.show_show = true
                setTimeout(() => {
                    this.selector_class = 'show'
                },100)
            } else {
                this.selector_class = 'close'
                setTimeout(() => {
                    this.show_show = false
                },200)
            }
        },
        /**
         * 获取列表
         */
        getList(){
            if(this.list.loading) return true
            this.list.loading = true
            return this.$sendGet("link",{
                limit: this.list.limit
            })
                .then((res) => {
                    this.list.loading = false
                    let data = res.data.data
                    if(data.length > 0) {
                        this.list.data.push(...data)
                        this.list.limit[0] += this.list.limit[1]
                        this.$refs.scroll && this.$refs.scroll.forceUpdate(true,false);
                    } else {
                        if(this.list.data.length > this.list.limit[1]){
                            this.$refs.scroll && this.$refs.scroll.forceUpdate(true,true);
                        } else {
                            this.scroll_option.pullUpLoad = false;
                            this.$refs.scroll && this.$refs.scroll.refresh();
                        }
                    }
                });
        },
        /**
         * 上拉加载
         */
        upLoad() {
          this.getList()
        },
        /**
         * 点击显示编辑弹窗
         */
        showEditLink(){
            this.edit = {
                show: true,
                link_id: ''
            }
        },
        /**
         * 卡券创建成功
         */
        createSuccess(link_id) {
            this.edit.link_id = link_id
            this.handel_index = 0
            this.$sendGet("link/" + link_id)
                .then((res) => {
                    let {code, data} = res.data
                    if(code === 0) {
                        this.list.data.unshift(data)
                    }
                })
        },
        /**
         * 卡券修改成功
         */
        editSuccess() {
            console.log('修改成功')
            this.$sendGet("link/" + this.list.data[this.handle_index].id)
                .then((res) => {
                    let data = res.data.data
                    this.list.data.splice(this.handle_index,1,data)
                })
        },
        /**
         * 点击列表dl
         */
        clickDl(index) {
            this.handle_index = index
            let sheet_data = [
                {
                  content: '查看',
                  value: 'watch'
                },
                {
                    content: '修改',
                    value: 'update'
                },
                {
                    content: '删除',
                    value: 'delete'
                }
            ]
            if(this.select){
                sheet_data.unshift({
                    content: '选择',
                    value: 'select'
                })
            }
            this.$createActionSheet({
                title: '操作',
                data: sheet_data,
                zIndex: 1300,
                onSelect:(res)=>{
                    switch (res.value) {
                        case 'watch':
                            this.watch()
                            break;
                        case 'update':
                            this.update()
                            break;
                        case 'delete':
                            this.delete()
                            break;
                        case 'select':
                            this.confirm()
                            break;
                    }
                }
            }).show()
        },
        /**
         * 删除
         */
        delete() {
            this.$del("link/" + this.list.data[this.handle_index].id)
                .then(() => {
                   this.list.data.splice(this.handle_index,1)
                })
                .catch((error) => {
                    this.$handleError(error, this)
                })
        },
        /**
         * 编辑
         */
        update() {
            this.edit = {
                show: true,
                link_id: this.list.data[this.handle_index].id
            }
        },
        /**
         * 查看链接
         */
        watch() {
            window.open(this.list.data[this.handle_index].link)
        },
        /**
         * 确认选择
         */
        confirm() {
            this.$emit("confirm",this.list.data[this.handle_index].id)
            this.toggle(false)
        }
    }
}
</script>

<style scoped lang="less" src="./links.less"></style>
